<template>
	<div class="login">
		<div class="login-weaper">
			<div class="login-left">
				<div class="login-time">{{ time.txt }}</div>
				<div class="login-left-box">
					<div>
						<div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
						<h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
						<div class="msg">
							<div class="msg-author">
								<span>{{ quotations.name }}</span>
								<span>{{ quotations.comeFrom }}</span>
							</div>
							<div class="msg-txt">{{ quotations.content }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="login-right">
				<div class="login-main">
					<h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
					<el-form class="el-form login-form">
						<el-form-item style="margin-left: 0px" prop="userName">
							<el-input
								type="text"
								placeholder="请输入账号"
								prefix-icon="el-icon-user"
								v-model="loginForm.ukey"
								clearable
								autocomplete="off"
								>
							</el-input>
						</el-form-item>
						<el-form-item style="margin-left: 0px" prop="password">
							<el-input
								type="password"
								placeholder="请输入密码"
								prefix-icon="el-icon-lock"
								v-model="loginForm.uvalue"
								autocomplete="off"
								:show-password="true"
								>
							</el-input>
						</el-form-item>
						<el-form-item style="margin-left: 0px" prop="code">
							<div class="el-row" span="24">
								<div class="el-col el-col-16">
									<el-input
										type="text"
										maxlength="4"
										placeholder="请输入验证码"
										prefix-icon="el-icon-position"
										v-model="loginForm.code"
										clearable
										autocomplete="off"
									></el-input>
								</div>
								<div class="el-col el-col-8">
									<div class="login-code">
										<span class="login-code-img">{{ loginForm.code }}</span>
									</div>
								</div>
							</div>
						</el-form-item>
						<el-form-item style="margin: 40px 0px 0">
							<el-button type="primary" class="login-submit" @click="submitForm" :loading="submit.loading">
								<span>登 录</span>
							</el-button>
						</el-form-item>
					</el-form>
					<div class="login-menu">
						<a href="javascript:;">忘记密码</a>
						<a href="javascript:;">注册账号</a>
					</div>
				</div>
			</div>
		</div>
		<div class="vue-particles">
			<vue-particles color="#dedede" shapeType="star" linesColor="#dedede" hoverMode="grab" clickMode="push" style="height: 100%"></vue-particles>
		</div>
	</div>
</template>

<script>
import { Session } from '@/utils/storage';
import { formatDate, formatAxis } from '@/utils/formatTime';
import { PrevLoading } from '@/utils/loading.js';
import { quotationsList } from './mock';
import { useLoginApi } from '@/api/login';

export default {
	name: 'login',
	data() {
		return {
			quotationsList,
			quotations: {},
			isView: false,
			submit: {
				loading: false,
			},
			loginForm: {
				ukey: 'admin',
				code: '',
				uvalue: 'Sxygsj!2q',
				uuid: '',
			},
			time: {
				txt: '',
				fun: null,
			},
		};
	},
	computed: {
		// 获取当前时间
		currentTime() {
			return formatAxis(new Date());
		},
		// 获取布局配置信息
		getThemeConfig() {
			return this.$store.state.themeConfig.themeConfig;
		},
	},
	created() {
		this.initTime();
	},
	mounted() {
		this.initRandomQuotations();
		this.getCode();
	},
	methods: {
		getUUID() {
			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
				var r = (Math.random() * 16) | 0,
					v = c == 'x' ? r : (r & 0x3) | 0x8;
				return v.toString(16);
			});
		},
		getCode() {
			this.loginForm.uuid = this.getUUID();
			useLoginApi()
				.getCode({ uuid: this.loginForm.uuid })
				.then((response) => {
					let reader = new FileReader();
					reader.onload = () => {
						let data = reader.result;
						let resCode = data.split('');
						// this.darwCode(resCode);
						this.loginForm.code = data;
					};
					reader.readAsText(response);
				});
		},
		darwCode(code) {
			let canvas = document.getElementById('img_code');
			let context = canvas.getContext('2d');

			// 清空画布
			context.clearRect(0, 0, canvas.width, canvas.height);

			// 绘制背景
			context.fillStyle = '#f3fbfe';
			context.fillRect(0, 0, canvas.width, canvas.height);

			// 绘制文字
			for (let i = 0; i < code.length; i++) {
				// 随机角度
				const deg = (Math.random() * 20 * Math.PI) / 180 - (Math.random() * 10 * Math.PI) / 180;
				// 固定字体大小，提高可读性
				const fontSize = 32;
				// 调整位置，使字符分布更均匀
				const x = 15 + i * 22;
				const y = canvas.height / 2 + Math.random() * 8 - 4;

				context.font = `bold ${fontSize}px Arial`;
				context.textBaseline = 'middle';
				context.fillStyle = this._randomColor(40, 180);

				context.save();
				context.translate(x, y);
				context.rotate(deg);
				context.fillText(code[i], 0, 0);
				context.restore();
			}

			// 绘制干扰线
			for (let i = 0; i < 4; i++) {
				context.beginPath();
				context.strokeStyle = this._randomColor(100, 180);
				context.lineWidth = 1;
				context.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
				context.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
				context.stroke();
			}

			// 绘制干扰点
			for (let i = 0; i < 30; i++) {
				context.fillStyle = this._randomColor(150, 200);
				context.beginPath();
				context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 1.5, 0, 2 * Math.PI);
				context.fill();
			}
		},
		_randomColor(min, max) {
			// 生成更柔和的颜色
			const r = Math.floor(Math.random() * (max - min) + min);
			const g = Math.floor(Math.random() * (max - min) + min);
			const b = Math.floor(Math.random() * (max - min) + min);
			return `rgb(${r},${g},${b})`;
		},
		// 随机语录
		initRandomQuotations() {
			this.quotations = this.quotationsList[Math.floor(Math.random() * this.quotationsList.length)];
		},
		// 初始化左上角时间显示
		initTime() {
			this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
			this.time.fun = setInterval(() => {
				this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
			}, 1000);
		},
		// 登录按钮点击
		async submitForm() {
			this.submit.loading = true;
			let response = await useLoginApi().signIn({ ...this.loginForm });
			if (response.code * 1 === 100) {
				this.handleSuccess(response);
			} else {
				this.handleError(response);
			}
			// setTimeout(() => {
			// 	let defaultRoles = [];
			// 	let defaultAuthBtnList = [];
			// 	// admin 页面权限标识，对应路由 meta.roles
			// 	let adminRoles = ['admin'];
			// 	// admin 按钮权限标识
			// 	let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
			// 	// common 页面权限标识，对应路由 meta.roles
			// 	let testAuthPageList = ['common'];
			// 	// test 按钮权限标识
			// 	let testAuthBtnList = ['btn.add', 'btn.link'];
			// 	if (this.ruleForm.userName === 'admin') {
			// 		defaultRoles = adminRoles;
			// 		defaultAuthBtnList = adminAuthBtnList;
			// 	} else {
			// 		defaultRoles = testAuthPageList;
			// 		defaultAuthBtnList = testAuthBtnList;
			// 	}
			// 	const userInfos = {
			// 		userName: this.ruleForm.userName === 'admin' ? 'admin' : 'test',
			// 		photo:
			// 			this.ruleForm.userName === 'admin'
			// 				? 'https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200'
			// 				: 'https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
			// 		time: new Date().getTime(),
			// 		roles: defaultRoles,
			// 		authBtnList: defaultAuthBtnList,
			// 	};
			// 	// 存储 token 到浏览器缓存
			// 	Session.set('token', Math.random().toString(36).substr(0));
			// 	// 存储用户信息到浏览器缓存
			// 	Session.set('userInfo', userInfos);
			// 	// 存储用户信息到vuex
			// 	this.$store.dispatch('userInfos/setUserInfos', userInfos);
			// 	PrevLoading.start();
			// 	this.$router.push('/');
			// 	setTimeout(() => {
			// 		this.$message.success(`${this.currentTime}，${this.$t('message.login.signInText')}`);
			// 	}, 300);
			// }, 300);
		},
		handleSuccess(data) {
			this.$message({
				message: '登录成功',
				type: 'success',
				duration: 1000,
			});
			// this.$router.push('/portal');
			let token = data.info.token;
			let userInfo = data.info.userinfo[0];
			let depinfo = data.info.depinfo[0];
			let jobinfo = data.info.jobinfo[0];
			const userInfos = {
				ukey: this.loginForm.ukey,
				photo:
					this.loginForm.ukey === 'admin'
						? 'https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200'
						: 'https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
				time: new Date().getTime(),
				roles: [userInfo.username],
				authBtnList: [],
				userInfo: userInfo,
				depInfo: depinfo,
				jobInfo: jobinfo,
			};
			setTimeout(() => {
				// 存储 token 到浏览器缓存
				Session.set('token', token);
				// 存储用户信息到浏览器缓存
				Session.set('userInfos', userInfos);
				Session.set('userInfo', userInfo);
				// 存储用户信息到vuex
				this.$store.dispatch('userInfos/setUserInfos', userInfos);
				this.$router.push('/leadership');
			}, 300);
		},
		handleError(data) {
			const errorMap = {
				500: 'error',
				501: 'error',
				502: 'error',
				503: 'error',
				504: 'error',
				505: 'warning',
				506: 'error',
				507: 'error',
				512: 'warning',
			};
			if (errorMap[data.code]) {
				this.$message({
					showClose: true,
					message: data.msg,
					type: errorMap[data.code],
				});
				this.loginForm.code = '';
			} else {
				this.$message.error(data.msg);
			}
			this.loading = false;
			if (data.code === '505' || data.code === '506' || data.code === '507' || data.code === '512') {
				this.getCode();
			}
			if (data.code === '504') {
				this.loginForm.code = '';
				this.getCode();
			}
			if (data.code === '505') {
				this.loginForm.code = '';
				this.getCode();
			}
		},
	},
	destroyed() {
		clearInterval(this.time.fun);
	},
};
</script>

<style scoped lang="scss">
.login {
	height: 100%;
	width: 100%;
	overflow: hidden;
	display: flex;
	position: relative;
	.vue-particles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
	}
	.login-weaper {
		margin: auto;
		height: 500px;
		display: flex;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		border: none;
		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
		.login-left {
			width: 491px;
			padding: 20px;
			font-size: 16px;
			color: var(--prev-color-text-white);
			position: relative;
			background-color: var(--prev-color-primary);
			display: flex;
			flex-direction: column;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			.login-time {
				width: 100%;
				color: var(--prev-color-text-white);
				opacity: 0.9;
				font-size: 14px;
				overflow: hidden;
			}
			.login-left-box {
				flex: 1;
				overflow: hidden;
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				padding: 80px 45px;
				.logo {
					font-size: 22px;
					margin-bottom: 15px;
				}
				.title {
					color: var(--prev-color-text-white);
					font-weight: 300;
					letter-spacing: 2px;
					font-size: 16px;
				}
				.msg {
					color: var(--prev-color-text-white);
					font-size: 13px;
					margin-top: 35px;
					.msg-author {
						opacity: 0.6;
						span:last-of-type {
							margin-left: 15px;
						}
					}
					.msg-txt {
						margin-top: 15px;
						line-height: 22px;
					}
				}
			}
		}
		.login-right {
			width: 491px;
			padding: 20px;
			position: relative;
			align-items: center;
			display: flex;
			background-color: var(--prev-bg-white);
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
			.login-main {
				margin: 0 auto;
				width: 70%;
				.login-title {
					color: var(--prev-color-text-primary);
					margin-bottom: 40px;
					font-weight: 500;
					font-size: 22px;
					text-align: center;
					letter-spacing: 4px;
				}
				.login-form {
					margin: 10px 0;
					i {
						color: var(--prev-color-text-primary);
					}
					.el-form-item {
						margin-bottom: 20px !important;
						.login-code {
							display: flex;
							align-items: center;
							justify-content: space-around;
							margin: 0 0 0 10px;
							user-select: none;
							.login-code-img {
								margin-top: 2px;
								width: 100px;
								height: 38px;
								border: 1px solid var(--prev-border-color-base);
								color: var(--prev-color-text-primary);
								font-size: 14px;
								font-weight: 700;
								letter-spacing: 5px;
								line-height: 38px;
								text-indent: 5px;
								text-align: center;
								cursor: pointer;
								transition: all ease 0.2s;
								border-radius: 4px;
								&:hover {
									border-color: var(--prev-border-color-hover);
									transition: all ease 0.2s;
								}
							}
						}
						.login-submit {
							width: 100%;
							letter-spacing: 2px;
						}
					}
				}
				.login-menu {
					margin-top: 30px;
					width: 100%;
					text-align: left;
					a {
						color: var(--prev-color-text-secondary);
						font-size: 12px;
						margin: 0 8px;
						text-decoration: none;
						&:hover {
							color: var(--prev-color-primary);
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
}
</style>
